<template>
    <div class="himg ">
        <div class="view-img-box" v-if="info.bg_img">
            <div class="zw-img-box">
                <img :src="$imgUrl + info.bg_img" alt="">
                <div class="viewImgBox_content " v-if="late_show">
                    <!-- 移动容器 -->
                    <Vue3DraggableResizable :initW="viewImgHotItem.w" :initH="viewImgHotItem.h"
                        v-for="(viewImgHotItem, viewImgHotIndex) in info.list" :key="viewImgHotIndex + '_name'"
                        v-model:x="viewImgHotItem.x" v-model:y="viewImgHotItem.y" v-model:w="viewImgHotItem.w"
                        v-model:h="viewImgHotItem.h" :draggable="true" :resizable="true" :parent="true">
                        <div class="hot-box forbid">
                            <!-- 移动内容 -->
                            热区{{ viewImgHotIndex + 1 }}
                        </div>
                    </Vue3DraggableResizable>
                </div>
            </div>
        </div>
        <div class="view-img-box" v-else>
            <empty icon="Picture" name="图片模块" />
        </div>
    </div>
</template>

<script setup name="HotImage">
import empty from '../empty.vue'

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
const props = defineProps({
    info: { required: true },
});

const late_show = ref(false)
onMounted(() => {
  setTimeout(() => {
    late_show.value = true
  }, 100);
});

</script>
<style lang="scss" scoped>
.himg {
    width: 100%;
    height: auto;

    .zw-img-box {
        width: 100%;
        height: auto;
        overflow: hidden;
        border: 1px dashed #ccc;
        position: relative;
    }

    .hot-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: aqua, $alpha: 0.4);
    }

    .zw-img-box img {
        width: 100%;
        height: auto;
        float: left;
    }

    .viewImgBox_content {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;

    }
}
</style>
